<template>
	<view class="followList">
		<view class="fixedTop">
			<!-- #ifdef MP-WEIXIN -->
			<u-status-bar></u-status-bar>
			<!-- #endif -->
			<view class="searchBar">
				<!-- #ifndef MP-TOUTIAO -->
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Left.png" mode="scaleToFill"
					@click="navigateBack()">
				</image>
				<!-- #endif -->
				<view class="cutNav">
					<view :class="['item',param.type == 1?'xz':'']" @click="cut(1)">
						关注
						<text v-if="param.type == 1"></text>
					</view>
					<view :class="['item',param.type == 2?'xz':'']" @click="cut(2)">
						粉丝
						<text v-if="param.type == 2"></text>
					</view>
				</view>
				<!-- #ifndef MP-TOUTIAO -->
				<view class="right"></view>
				<!-- #endif -->
			</view>
		</view>

		<view class="num">
			{{`我的${param.type == 1?"关注":"粉丝"}（${total}人）`}}
		</view>
		<view class="List">
			<view class="item" v-for="(v,i) in dataList" :key="i">
				<view class="left">
					<image :src="v.user.avatar" mode="scaleToFill"></image>
					<view class="msg">
						<view class="name">{{v.user.nickname}}</view>
						<view class="id">ID：{{v.user.id}}</view>
					</view>
				</view>
				<view class="right" @click="doFavorite(v)">
					<text class="t1" v-if="v.follow_status == 1">已关注</text>
					<text class="t2" v-else-if="v.follow_status == 2">互相关注</text>
					<text class="t3" v-else>关注</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param: {
					type: "", //true int 1 关注列表 2 粉丝列表
					user_id: "", //true int 要查看的用户id 查看自己可不传
					page: 1, //true int 当前页
					size: 15, //true int 每页多少条
				},
				dataList: [],
				total: 0
			}
		},
		onLoad(options) {
			this.param.type = options.type
			this.getFollowList()
		},
		methods: {
			cut(type) {
				this.param.type = type
				this.param.page = 1
				this.dataList = []
				this.total = 0
				this.getFollowList()
			},
			//关注/取消关注
			async doFavorite(value) {
				if (value.follow_status == 0) {
					if (this.param.type == 1) {
						value.follow_status = 1
					} else {
						value.follow_status = 2
					}
				} else if (value.follow_status == 1) {
					value.follow_status = 0
				} else if (value.follow_status == 2) {
					value.follow_status = 0
				}
				let res = await this.$http("api/common/doFavorite", {
					type: 2, //true	int		1作品2用户
					work_type: 0, //false	int		默认可以传0,type等于1需要传,作品操作类型 1收藏 2点赞
					tbl_id: value.user.id, //true	int		作品id或用户id 取消收藏多个id用,拼接
				})
				if (res.code == 200) {

				} else {

				}
			},
			//关注/粉丝列表
			async getFollowList() {
				let res = await this.$http("api/user/getFollowList", this.param, "GET")
				if (res.code == 200) {
					this.dataList = this.dataList.concat(res.result.data)
					this.total = res.result.total
				}
			}
		},
		onReachBottom() {
			if (this.dataList.length >= this.total) return
			this.param.page += 1
			this.getFollowList()
		}
	}
</script>

<style scoped lang="scss">
	.followList {
		// #ifdef MP-WEIXIN
		padding-top: 184rpx;
		// #endif
		// #ifndef MP-WEIXIN
		padding-top: 88rpx;

		// #endif
		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			background-color: #fff;

			.searchBar {
				display: flex;
				align-items: center;
				// #ifndef MP-TOUTIAO
				justify-content: space-between;
				// #endif
				// #ifdef MP-TOUTIAO
				justify-content: center;
				// #endif
				width: 100%;
				height: 88rpx;

				image,
				.right {
					width: 40rpx;
					height: 40rpx;
				}

				.cutNav {
					display: flex;
					align-items: center;
					justify-content: center;

					.item {
						position: relative;
						font-weight: bold;
						font-size: 28rpx;
						color: #8D8F90;
						padding: 0 24rpx;
						margin-top: -10rpx;

						text {
							position: absolute;
							left: calc(50% - 16rpx);
							bottom: -16rpx;
							display: block;
							width: 32rpx;
							height: 8rpx;
							background-color: #333333;
							border-radius: 6rpx;
						}
					}

					.xz {
						color: #333333;
					}
				}
			}
		}

		.num {
			font-weight: 500;
			font-size: 24rpx;
			color: #8D8F90;
			padding: 8rpx 32rpx;
		}

		.List {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 140rpx;
				padding: 0 32rpx;
				box-sizing: border-box;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}

					.msg {
						padding: 0 16rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.id {
							font-weight: 500;
							font-size: 24rpx;
							color: #8D8F90;
							padding-top: 12rpx;
						}
					}
				}

				.right {
					text {
						display: block;
						width: 152rpx;
						height: 56rpx;
						line-height: 56rpx;
						border-radius: 12rpx;
						text-align: center;
						font-weight: bold;
						font-size: 24rpx;
						box-sizing: border-box;
					}

					.t1 {
						color: #333333;
						background: #F6F6F4;
					}

					.t2 {
						color: #333333;
						border: 2rpx solid #CACACA;
					}

					.t3 {
						color: #FF504A;
						border: 2rpx solid #FF504A;
					}
				}
			}
		}
	}
</style>